<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<text>设备收益</text>
		</view>

		<!-- 总收益 -->
		<view class="total-revenue">
			<text>总收益</text>
			<text class="amount">¥{{ totalRevenue }}</text>
			<text>数据截止 {{ currentDate }}</text>
		</view>

		<!-- 日历视图 -->
		<view class="calendar">
			<view v-for="(day, index) in days" :key="index" class="day" :class="{ 'active': day.active }">
				<text>{{ day.date }}</text>
				<text>{{ day.value }}</text>
			</view>
		</view>

		<!-- 流量图 -->
		<!-- <view class="flow-chart">
			<text>流量图</text>
			<text>跑量: {{ flowRate }} Mbps</text>
			<chart ref="flowChart" type="line" :data="flowData"></chart>
		</view> -->
	</view>
</template>

<script>
	import {
		apiDeviceInfo
	} from '@/api/device.js';
	// import Chart from '@/components/Chart.vue'

	export default {
		//  components: {
		// Chart
		//  },
		data() {
			return {
				totalRevenue: 22.44,
				currentDate: '2025-07-18',
				days: [{
						date: 13,
						value: '+0.00',
						active: false
					},
					{
						date: 14,
						value: '+0.24',
						active: false
					},
					{
						date: 15,
						value: '+0.27',
						active: false
					},
					{
						date: 16,
						value: '+0.34',
						active: false
					},
					{
						date: 17,
						value: '+0.35',
						active: true
					}, // 当前日期高亮
					{
						date: 19,
						value: '0.00',
						active: false
					}
				],
				flowRate: '5.2Mbps',
				flowData: {
					categories: ['00:00', '04:50', '09:40', '14:30', '19:20', '23:55'],
					series: [{
						name: '流量',
						data: [7, 4, 3, 6, 5, 2]
					}]
				}
			}
		},
		methods: {
			handleDayClick(day) {
				this.days.forEach(d => (d.active = false))
				day.active = true
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.header {
		background-color: #007aff;
		color: white;
		padding: 20rpx;
		text-align: center;
	}

	.total-revenue {
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.amount {
		font-size: 40rpx;
		font-weight: bold;
	}

	.calendar {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.day {
		width: 15%;
		text-align: center;
		padding: 10rpx;
		margin-bottom: 10rpx;
		background-color: #f0f0f0;
		border-radius: 10rpx;
	}

	.day.active {
		background-color: #007aff;
		color: white;
	}

	.flow-chart {
		margin-top: 40rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
</style>